<template>
	<view class="box bg-f7">
		<view class="bg-box">
			<image :src='BASE_URL+"/uploads/20250801/8c6062e6aedf14db0c159536563ade06.png"' mode="widthFix"></image>
		</view>
		<u-navbar :titleStyle='{"color":"#fff"}' leftIconColor='#fff' title="健康供销社" bgColor="transparent"
			@rightClick="rightClick" :autoBack="true" :fixed="false"> </u-navbar>
		<view class="padding-30 z-1">
			<view class="search-box align-items-center" @click="searchKey">
				<view class="search-input align-items-center">
					<image src="/static/image/shop/search.png" mode="widthFix"></image>
					<input type="search" name="" id="" v-model="keyword" class="flex-1" />
					<view class="search-btn">搜索</view>
				</view>
				<view class="car-box" @click="goCar">
					<image src="/static/image/shop/car.png" mode="widthFix"></image>
					<view v-show="carLength ">{{carLength}}</view>
				</view>
			</view>
			<view class="shop-list justifyContent-spaceBetween">
				<view class="shop-left" @click="goFeatured">
					<view class="title fw-b color-0 fs-28">
						特色商品
					</view>
					<view class="">
						<view v-for="(item,index) in shopLeftList" :key="index" v-show="index < 3"
							class="shop-left-list bg-white border-radio-14 flex-box">
							<view class="img-box">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="flex-column justifyContent-spaceBetween">
								<view class="only-1 fs-26 color-0">{{item.title}}</view>
								<view class="price-box">￥<text> {{item.price}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-right">
					<view class="shop-right-list bg-white border-radio-14 padding-l-r-20" v-for="(item,index) in shops " :key="index" v-show='index <2'>
						<view class="title">
							{{item.nickname}}
						</view>
						<view class="align-items-center justifyContent-spaceBetween">
							<view v-for="(e,i) in item.goods" class="img-box" :class="{'margin-l-20':i}" :key="i " v-show="i <2">
                                <u--image :showLoading="true" :src="e.image" width="130rpx" height="130rpx" @click="goShopDetaisl(e)"></u--image>
							</view>
						</view>
					</view>
					<!-- <view class="shop-right-list bg-white border-radio-14 padding-l-r-20 margin-t-20">
						<view class="title">
							同仁堂专区
						</view>
						<view class="align-items-center">
							<view v-for="(item,index) in shopRightList" class="img-box" :class="{'margin-l-20':index}"
								:key="index">
								<image :src="item.imgSrc" mode="aspectFill"></image>
							</view>
						</view>
					</view> -->
				</view>
			</view>

		</view>
		<u-sticky>
			<view class="linear-box   z-1 ">
                <view class="align-items-center padding-l-r-30 sort-box">
                    <view class="align-items-center" @click="getSort(1)">
                        <text class="fs-26 color-333 margin-r-10">综合</text>
                        <u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==1"></u-icon>
                        <u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
                    </view>
                    <view class="align-items-center" @click="getSort(2)">
                        <text class="fs-26 color-333 margin-r-10">销量</text>
                        <u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==2"></u-icon>
                        <u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
                    </view>
                    <view class="align-items-center" @click="getSort(3)">
                        <text class="fs-26 color-333 margin-r-10">价格</text>
                        <u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==3"></u-icon>
                        <u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
                    </view>
                    <view class="flex-1"></view>

                </view>
                <view class="sortType-box">
                    <view class="sortType-list bg-white padding-30" v-show="sortType ==1">
                        <view class="color-0 fs-26 justifyContent-spaceBetween align-items-center" :class="{'active':sortIndex==1}" @click="setSort(1)">
                            <text>综合排序</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                        <view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center" @click="setSort(2)" :class="{'active':sortIndex==2}">
                            <text>新品优先</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="sortType-list bg-white padding-30" v-show="sortType ==2">
                        <view class="color-0 fs-26 justifyContent-spaceBetween align-items-center" :class="{'active':sortIndex==3}" @click="setSort(3)">
                            <text>从高到低</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                        <view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center" @click="setSort(4)" :class="{'active':sortIndex==4}">
                            <text>从低到高</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="sortType-list bg-white padding-30" v-show="sortType ==3">
                        <view class="color-0 fs-26 justifyContent-spaceBetween align-items-center" :class="{'active':sortIndex==5}" @click="setSort(5)">
                            <text>从高到低</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                        <view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center" @click="setSort(6)" :class="{'active':sortIndex==6   }">
                            <text>从低到高</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
			</view>
		</u-sticky>
		<view class="align-items-center bg-white z-1" style="margin-top: -1px">
			<view class="popular-recommendations ">
				<waterFall ref="waterFall" @joinCart="getCartList" ></waterFall>
			</view>
		</view>
	</view>
</template>

<script>
	import waterFall from '@/components/waterfall/index.vue';
	import $baseUrl from "@/config/index.js"
	const BASE_URL = $baseUrl.baseUrl
	import {
        getCartList,
		getGoodsData
	} from '@/api/home.js'
	export default {
		components: {
			waterFall
		},
		data() {
			return {
				BASE_URL,
                sortType:0,
                sortIndex:0,
				navBarHeight: 0,
				shopLeftList: [ ],
				shopRightList: [{
						price: 300,
						imgSrc: 'https://www.miaoshous.com/images/product/56_1523867383803328.jpg',
						name: '商品的标题位...'
					},
					{
						price: 300,
						imgSrc: 'https://www.miaoshous.com/images/product/56_1523867383803328.jpg',
						name: '商品的标题位...'
					},
				],
				shops: [],
				keyword: '',
                order_field:'',
                order_sort:'',
                carLength:0
			}
		},
		onLoad() {
			this.$nextTick(() => {
				// 确保在这里访问 $refs 是安全的
				const myRef = this.$refs.waterFall;
				if (myRef) {
					this.$refs.waterFall.initList()
				}
			});
            this.getGoodsData()
            this.getCartList()
		},
        onShow() {
            // this.getBarHeight()
        },
		onPullDownRefresh() {
			this.$refs.waterFall.pullDownRefresh()
		},
		methods: {
            getCartList(){
                getCartList().then(res => {
                    if(res.code == 1){
                       this.carLength =res.data.length || 0
                    }
                })
            },
            getSort(index){
                this.sortType = index;
            },
            setSort(index){
                this.sortIndex = index;
                let order_field= '',order_sort=''
                if(index ==1){
                    order_field='weigh'
                    order_sort='desc'
                }else if (index ==2){
                    order_field='createtime'
                    order_sort='desc'
                }else if (index ==3){
                    order_field='sales'
                    order_sort='desc'
                }else if (index ==4){
                    order_field='sales'
                    order_sort='aesc'
                }else if (index ==5){
                    order_field='price'
                    order_sort='desc'
                }else if (index ==6){
                    order_field='price'
                    order_sort='aesc'
                }
                this.order_field = order_field
                this.order_sort=order_sort
                this.sortType=0
                this.search()
            },
            search(){
                this.$refs.waterFall.initList({keywords:'',order_field:this.order_field,order_sort:this.order_sort})
            },
			getGoodsData() {
				getGoodsData().then(res => {
					if (res.code == 1) {
						this.shops = res.data.shops
                        this.shopLeftList = res.data.goods
					}
				})
			},
            goCar(){
                uni.switchTab({
                	url:'/pages/car/car'
                })
            },
			goFeatured() {
				uni.navigateTo({
					url: '/pageA/shop/featured'
				})
			},
			searchKey() {
				uni.navigateTo({
					url: '/pageA/shop/search'
				})
			},
            goShopDetaisl(e){
                uni.navigateTo({
                    url:'/pageA/shop/details?id='+e.id
                })
            },
		}
	}
</script>

<style lang="scss" scoped>
	.bg-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}

    .sortType-box {
        position: absolute;
        left: 0;
        top: 70rpx;
        width: 100%;
        .sortType-list {
            width: 100%;
            height: 200rpx;
            border-radius: 0  0  30rpx;
        }
        .align-items-center {
            height: 52rpx;
        }
        .active {
            image {
                display: block;
            }
        }
        image {
            display: none;
            width: 40rpx;
            height: 40rpx;
        }
    }
	.search-input {
		width: 600rpx;
		height: 66rpx;
		padding-left: 30rpx;
		background: rgba(250, 250, 250, 0.1);
		border-radius: 30rpx;
		border: 1px solid rgba(255, 255, 255, 0.48);

		image {
			width: 22rpx;
		}

		input {
			padding: 0 30rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.search-btn {
			width: 120rpx;
			height: 56rpx;
			background: #6B9562;
			border-radius: 28rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			line-height: 56rpx;
		}
	}

	.car-box {
		position: relative;
		margin-left: 30rpx;

		image {
			width: 50rpx;
		}

		view {
			position: absolute;
			top: 0;
			right: 0;
			min-width: 26rpx;
			height: 26rpx;
			text-align: center;
			line-height: 26rpx;
			border-radius: 50%;
			background-color: #FF7A3A;
			color: #fff;
			font-size: 22rpx
		}
	}

	.shop-list {
		margin-top: 26rpx;

		.title {
			height: 64rpx;
			line-height: 64rpx;
		}

		.shop-left {
			width: 340rpx;
			height: 440rpx;
			padding: 0 10rpx;
			background: linear-gradient(180deg, #DCEED8 0%, #F7F7F7 100%);
			border-radius: 14rpx;
		}

		.shop-left-list {
			width: 320rpx;
			height: 116rpx;
			padding: 14rpx;
			margin-top: 9rpx;

			&:first-child {
				margin-top: 0;
			}

			.img-box {
				width: 90rpx;
				height: 90rpx;
				min-width: 90rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.price-box {
				color: #FF7A3A;
				font-size: 24rpx;

				text {
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}
	}

	.shop-right {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.shop-right-list {
			width: 340rpx;
			height: 210rpx;
			background: linear-gradient(185deg, #FFF0E6 0%, #FFFFFF 100%);
			padding-bottom: 14rpx;

			.img-box {
				width: 130rpx;
				height: 130rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.linear-box {
		border-radius: 30rpx 30rpx 0 0;
		background: #FFF;
	}

	.popular-recommendations {
		width: 100%;
		min-height: 50vh;
		padding-top: 20rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
	}

	.sort-box {
		height: 70rpx;
		margin-top: 10rpx;

		.align-items-center {
			margin-right: 110rpx;
		}

		.img-box {
			width: 30rpx;
		}
	}
</style>